<div xmlns:th="http://www.thymeleaf.org">
    <script>
        function loadScript(src, callback) {
            let script = document.createElement('script'),
                head = document.getElementsByTagName('head')[0];
            script.type = 'text/javascript';
            script.charset = 'UTF-8';
            script.src = src;
            if (script.addEventListener) {
                script.addEventListener('load', function () {
                    callback();
                }, false);
            } else if (script.attachEvent) {
                script.attachEvent('onreadystatechange', function () {
                    let target = window.event.srcElement;
                    if (target.readyState === 'loaded') {
                        callback();
                    }
                });
            }
            head.appendChild(script);
        }
    </script>
    <script th:inline="javascript">
        document.title = [[${titleName}]]
        const commonSiteUrl = [[${setting.siteUrl}]]
        $(function(){
            // common.js
            /***
             * 动态打字效果
             */
            let divTyping = $('#article-title')
            let i = 0,timer = 0,str = divTyping.text()
            function typing () {
                if (i <= str.length) {
                    divTyping.text(str.slice(0, i++))
                    if(divTyping.css('display') === 'none'){
                        divTyping.css('display', 'contents')
                    }
                    timer = setTimeout(typing, 80)
                } else {
                    clearTimeout(timer)
                }
            }
            setTimeout(typing, 500)
            let labelIcon = $('.changeTheme i')
            let labelTitle = $('.changeTheme span')
            // 添加暗色主题
            function addDarkTheme() {
                const themeDark = $('#theme-css-dark')
                if(themeDark.length > 0){
                    return
                }
                let link = document.createElement('link');
                link.type = 'text/css';
                link.id = "theme-css-dark";  // 加上id方便后面好查找到进行删除
                link.rel = 'stylesheet';
                link.href = commonSiteUrl + '/css/dark/index-2.0.2.css';
                document.getElementsByTagName("head")[0].appendChild(link);
                labelIcon.removeClass('fa-moon')
                labelIcon.addClass('fa-sun')
                labelTitle.html('亮色')
            }
            // 删除暗色主题
            function removeDarkTheme() {
                const themeDark = $('#theme-css-dark')
                if(themeDark.length > 0){
                    themeDark.remove();
                    labelIcon.removeClass('fa-sun')
                    labelIcon.addClass('fa-moon')
                    labelTitle.html('暗色')
                }
            }
            // 使用暗色主题(记录选择到cookie中)
            function useDarkTheme(useDark) {
                setCookie('jmal-theme', useDark ? "dark" : "light");
                if (useDark) {
                    addDarkTheme();
                } else {
                    removeDarkTheme();
                }
            }
            // 获取cookie中选中的主题名称，没有就给个默认的
            function getThemeCSSName() {
                return getCookie('jmal-theme') || "light";
            }

            function changeTheme() {
                useDarkTheme(getThemeCSSName() === 'light')
                // 记录切换主题的时间戳
                setCookie('changeTheme', new Date().getTime())
            }

            $('.changeTheme').on('click', function (){
                changeTheme()
            })

            let media = window.matchMedia('(prefers-color-scheme: dark)');
            // 判断系统是否为深色模式
            if (media && media.matches) {
                if(getCookie('changeTheme')){
                    // 上次切换主题的时间距离现在超过8小时就是使用系统默认主题
                    if(new Date().getTime() - getCookie('changeTheme') > 3600 * 1000 * 8){
                        useDarkTheme(true)
                    }
                } else {
                    useDarkTheme(true)
                }
            }
            let callback = (e) => {
                if (e.matches) {
                    useDarkTheme(true)
                } else {
                    useDarkTheme(false)
                }
            };
            // 监听系统主题变化
            if (typeof media.addEventListener === 'function') {
                media.addEventListener('change', callback);
            } else if (typeof media.addListener === 'function') {
                media.addListener(callback);
            }

            function setCookie(name, value) {
                document.cookie = name + "=" + value + ";path=/";
            }

            function getCookie(cname) {
                let name = cname + "=";
                let decodedCookie = decodeURIComponent(document.cookie);
                let ca = decodedCookie.split(';');
                for(let i = 0; i <ca.length; i++) {
                    let c = ca[i];
                    while (c.charAt(0) === ' ') {
                        c = c.substring(1);
                    }
                    if (c.indexOf(name) === 0) {
                        return c.substring(name.length, c.length);
                    }
                }
                return "";
            }
        });
    </script>
</div>
